import 'package:flutter/material.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));
var greenColor = Color(0xff32a05f);
var darkGreenColor = Color(0xff279152);
var productImage = 'https://i1.bvimg.com/688304/c2fba15dc64603ee.png';

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0,
        leading: GestureDetector(
          onTap: () {},
          child: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
        ),
      ),
      backgroundColor: greenColor,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 4,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 32.0, vertical: 12.0),
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(108.0)),
                color: Colors.white,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 300.0,
                    child: Text(
                      '小提琴叶无花果修剪',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 32.0),
                    ),
                  ),
                  SizedBox(height: 12.0),
                  Text(
                    '10" 幼苗',
                    style: TextStyle(color: Colors.black45),
                  ),
                  SizedBox(height: 12.0),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10.0),
                        child: Text('\$',
                            style: TextStyle(
                                color: greenColor,
                                fontSize: 24.0,
                                fontWeight: FontWeight.bold)),
                      ),
                      SizedBox(width: 4.0),
                      Text('85',
                          style: TextStyle(
                              color: greenColor,
                              fontWeight: FontWeight.bold,
                              fontSize: 52.0)),
                    ],
                  ),
                  Spacer(),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      FloatingActionButton(
                        onPressed: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => DetailsScreen()));
                        },
                        backgroundColor: greenColor,
                        child: Icon(Icons.shopping_cart),
                      ),
                      Container(
                        width: 200.0,
                        child: Image.network(
                          productImage,
                          fit: BoxFit.cover,
                        ),
                      )
                    ],
                  ),
                  SizedBox(height: 16.0)
                ],
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 38.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(height: 16.0),
                  Text('栽培', style: TextStyle(color: Colors.white)),
                  Spacer(),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        height: 100.0,
                        width: MediaQuery.of(context).size.width / 2 - 50,
                        decoration: BoxDecoration(
                            color: darkGreenColor,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(32.0),
                                topRight: Radius.circular(32.0))),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  '250',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 42.0),
                                ),
                                SizedBox(width: 8.0),
                                Text(
                                  'ml',
                                  style: TextStyle(color: Colors.white54),
                                )
                              ],
                            ),
                            Text(
                              '水',
                              style: TextStyle(color: Colors.white54),
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 100.0,
                        width: MediaQuery.of(context).size.width / 2 - 50,
                        decoration: BoxDecoration(
                            color: darkGreenColor,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(32.0),
                                topRight: Radius.circular(32.0))),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  '18',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 42.0),
                                ),
                                SizedBox(width: 8.0),
                                Text(
                                  'c',
                                  style: TextStyle(color: Colors.white54),
                                )
                              ],
                            ),
                            Text(
                              '阳光',
                              style: TextStyle(color: Colors.white54),
                            )
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          )
        ],
      ));
}

class DetailsScreen extends StatelessWidget {
  @override
  build(context) => Scaffold(
        appBar: AppBar(
          backgroundColor: greenColor,
          elevation: 0.0,
        ),
        backgroundColor: greenColor,
        body: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(32.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('绿色植物 纽约',
                      style: TextStyle(
                          color: Colors.white,
                          letterSpacing: 1.1,
                          fontSize: 22.0)),
                  SizedBox(height: 32.0),
                  Container(
                    width: 200.0,
                    child: Text(
                      '产品概览',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 48.0),
                    ),
                  ),
                  SizedBox(height: 42.0),
                  itemRow(Icons.star, 'water', 'every 7 days'),
                  SizedBox(height: 22.0),
                  itemRow(Icons.ac_unit, 'Humidity', 'up to 82%'),
                  SizedBox(height: 22.0),
                  itemRow(Icons.straighten, 'Size', '38" - 48"tdll'),
                ],
              ),
            ),
            SizedBox(height: 32.0),
            Padding(
              padding: const EdgeInsets.only(left: 48.0),
              child: Container(
                height: 60.0,
                decoration: BoxDecoration(
                    color: darkGreenColor,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(32.0),
                        bottomLeft: Radius.circular(32.0))),
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Icon(Icons.add, color: Colors.white, size: 24.0),
                    SizedBox(width: 40.0),
                    Text(
                      '配送信息',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 22.0,
                          fontWeight: FontWeight.w500),
                    )
                  ],
                ),
              ),
            ),
            SizedBox(height: 32.0),
            Padding(
              padding: const EdgeInsets.only(left: 48.0),
              child: Container(
                height: 60.0,
                decoration: BoxDecoration(
                    color: darkGreenColor,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(32.0),
                        bottomLeft: Radius.circular(32.0))),
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Icon(Icons.add, color: Colors.white, size: 24.0),
                    SizedBox(width: 40.0),
                    Text(
                      '售后服务',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 22.0,
                          fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
              ),
            ),
            Spacer(),
            Container(
              height: 80.0,
              child: Row(
                children: <Widget>[
                  Container(
                    width: MediaQuery.of(context).size.width / 2,
                    child: Icon(
                      Icons.arrow_drop_down,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                      height: 80.0,
                      width: MediaQuery.of(context).size.width / 2,
                      decoration: BoxDecoration(
                          color: Color(0xff2c2731),
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(48.0))),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.add_shopping_cart,
                            color: Colors.white,
                          ),
                          SizedBox(
                            width: 6.0,
                          ),
                          Text(
                            '加入购物车',
                            style: TextStyle(color: Colors.white),
                          )
                        ],
                      ))
                ],
              ),
            )
          ],
        ),
      );

  itemRow(icon, name, title) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              Icon(
                icon,
                color: Colors.white,
              ),
              SizedBox(width: 6.0),
              Text(
                name,
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              )
            ],
          ),
          Text(title, style: TextStyle(color: Colors.white54, fontSize: 20.0))
        ],
      );
}
